<template>
  <views class="account_list">
    <!-- 新增/修改 -->
    <el-dialog
      :title="type==1?'新增线路':'修改线路'"
      :visible.sync="dialogVisible"
      width="40%"
      :before-close="handleClose"
    >
      <div class="dialog_content">
        <el-form ref="form" label-width="auto">
          <el-form-item label="选择地区:">
            <el-cascader
                    v-model="form.region_id"
                    :options="region_list"
                    :props="{ checkStrictly: true }"
                    clearable>
            </el-cascader>
          </el-form-item>
          <el-form-item label="关注等级:">
            <el-select v-model="form.judge_level" clearable placeholder="请选择">
              <el-option
                v-for="item in judge_level_list"
                :key="item"
                :label="item"
                :value="item"
              ></el-option>
            </el-select>
          </el-form-item>
        </el-form>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="saveUser">确 定</el-button>
      </span>
    </el-dialog>

    <viewTitle :title="'高危地区列表'"></viewTitle>
    <div class="search">
      <el-form ref="form" label-width="auto" :inline="true">
        <el-form-item label="选择地区:">
            <el-cascader
                    v-model="region_id"
                    :options="region_list"
                    :props="{ checkStrictly: true }"
                    clearable>
            </el-cascader>
        </el-form-item>
        <el-form-item label="关注等级:">
          <el-select v-model="judge_level" clearable placeholder="请选择">
            <el-option
                    v-for="item in judge_level_list"
                    :key="item"
                    :label="item"
                    :value="item"
            ></el-option>
          </el-select>
        </el-form-item>
      </el-form>

      <div class="btn-area">
        <el-button type="primary" @click="getData">查询</el-button>
        <el-button @click="reset">重置</el-button>
        <el-button type="warning"  v-if="$route.query.check.i" @click="add">新增</el-button>
      </div>
    </div>
    <div class="table_list">
      <el-table :data="tableList" style="width: 100%" border :header-cell-style="getRowClass">
        <el-table-column type="index" label="序号" width="100"></el-table-column>
        <el-table-column :formatter="(row)=>{return row.r_name3+ '/'+ row.r_name2+ '/'+ row.region_name }" label="地区名称" width="auto"></el-table-column>
        <el-table-column  label="关注等级" width="auto">
          <template slot-scope="rate">
              <el-rate
                      v-model="rate.row.judge_level"  disabled   show-score
                      :colors="returnColors">
              </el-rate>
          </template>
        </el-table-column>
        <el-table-column fixed="right" label="操作" width="300">
          <template slot-scope="scope">
            <el-button type="primary" @click="edit(scope.row)"  v-if="$route.query.check.m" icon="el-icon-edit">修改</el-button>
            <el-button v-if="$route.query.check.d" type="danger"  @click="deleted(scope.row)" icon="el-icon-delete">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
      <div class="flex flexR paging">
        <el-pagination
          style="background:#fff; padding:10px 0"
          background
          layout="prev, pager, next,sizes,total, jumper"
          @size-change="(page_size) => {this.pagination.page_size = page_size;this.getData()}"
          @current-change="(page_size) => {this.pagination.page_start = page_size;this.getData()}"
          :page-sizes="[10, 20, 30, 50]"
          :page-size="pagination.page_size"
          :total="pagination.total_count"
          :current-page="pagination.current_page"
          :page-count="pagination.page_count"
        ></el-pagination>
      </div>
    </div>
  </views>
</template>


<script>
import route_list from "../../router/route_list";

export default {
  data() {
    return {
      form:{
          region_id: "", // 用户名
          judge_level:0
      },
      region_list : [],
      region_id:"",
      judge_level: "", // 角色
      judge_level_list: [1,2,3,4,5], // 角色列表
      tableList: [],
      pagination: {
        page_start: 0, //搜索开始页码
        current_page: 0, //当前页码
        page_count: 0, //总页数
        page_size: 10, //每页数量
        total_count: 0 //总数量
      },
      type: 1, // 1 新增 2 修改
      dialogVisible: false // 弹框展示
    };
  },
  methods: {
    //    修改第一行样式
    getRowClass({ row, column, rowIndex, columnIndex }) {
      if (rowIndex === 0) {
        return "background: #FAFAFA ";
      } else {
        return "";
      }
    },
    //    修改是否换行
    changeStyleRow(width) {
      let _width = width - 290 - 350 - 300 - 50 - 25;
      if (_width > 300) {
        this.marginLeft = 25;
      } else {
        this.marginLeft = 0;
      }
    },
    // 获取数据
    getData() {
       this.$raxios.post(
            this.$mapapi.admin_listRegion,{data:this.query_data}
        ).then(res=>{
            if(res.code ==200){
            this.tableList = res.data.list || [];
            this.pagination = res.data.pagination || [];
        }else{
            this.tableList =  [];
            this.pagination = [];
	            this.$message.error(res.msg)
        }
        })
    },

    // 重置
    reset() {
        this.region_id= []
        this.judge_level= '';
        this.getData();
    },
    // 新增
    add() {
      this.form = {};
      this.type = 1;
      this.dialogVisible = true;
    },
    // 修改
    edit(row) {
      this.form = row;
      this.type = 2;
      this.dialogVisible = true;
    },
    // 删除
    deleted(row) {
      this.$confirm("此操作将删除该地区, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      })
        .then(() => {
            let post_data={
              judge_region_id:row.judge_region_id
            }
                this.$raxios.post(
                this.$mapapi.admin_delRegion,{data:post_data}
            ).then(res=>{
              if(res.code==200){
               this.$message({type: "success", message: "删除成功!"});
               this.getData()
              }else{
                this.regionList = [];
	              this.$message.error(res.msg)
                return;
              }
            })           
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除"
          });
        });
    },
    // 关闭
    handleClose() {
      this.dialogVisible = false;
    },
    saveUser(){
      this.$raxios.post(
         this.$mapapi.admin_entryRegion,{data:this.save_data}
        ).then(res=>{
          if(res.code==200){
            this.dialogVisible = false
            this.$message({type: "success", message: "保存成功!"});
            this.getData()
          } else {
            this.regionList = [];
	          this.$message.error(res.msg)
            return;
          }
        })
    }
  },
  computed:{
      query_data(){
          let data = {}
          data.region_id = this.region_id.slice(-1)[0] || 0;
          data.judge_level = this.judge_level
          data.pagination = this.pagination;

          return data
      },
      save_data(){
          this.form.region_id = Array.isArray(this.form.region_id) ? (this.form.region_id.slice(-1)[0]  || 0) :  this.form.region_id;
          let data = this.form;
          return data
      },
      returnColors(){
          return ['#F7BA2A', '#F7BA2A', '#FF9900']
      }
  },
  mounted() {
      this.getData()
  },
  created() {
      let { code, msg, data } = this.$api.sendSync(
          this.$mapapi.arriveRegionList
      )
      if (code != 200) {
          return;
      }
      this.region_list = data;
  }
};
</script>





<style lang="less" :scope="true"  src="@/style/system_manager/account_list.less">
</style>
